<template>
  <view class="search-container">
    <!-- 搜索头部 -->
    <view class="search-header">
      <input 
        class="search-input" 
        placeholder="请输入景点名称" 
        v-model="searchKeyword"
        @confirm="handleSearch"
      />
      <uni-icons type="closeempty" @click="clearSearch"></uni-icons>
      <uni-icons type="search" @click="handleSearch"></uni-icons>
    </view>
    
    <!-- 搜索结果 -->
    <view class="search-results" v-if="searchResults.length > 0">
      <view class="result-item" v-for="item in searchResults" :key="item.sightId" @click="goToDetail(item.sightId)">
        <image :src="item.images && item.images.length > 0 ? item.images[0] : '/static/logo.png'" class="item-image" mode="aspectFill"></image>
        <view class="item-info">
          <text class="item-title">{{ item.name }}</text>
          <text class="item-desc">{{ item.description }}</text>
          <text class="item-rating">评分: {{ item.rating }}</text>
        </view>
      </view>
    </view>
    
    <!-- 无结果提示 -->
    <view class="no-results" v-else-if="searched && searchResults.length === 0">
      <text>未找到相关景点</text>
    </view>
    
    <!-- 热门搜索 -->
    <view class="hot-search" v-else>
      <text class="hot-title">热门搜索</text>
      <view class="hot-tags">
        <text class="hot-tag" v-for="tag in hotTags" :key="tag" @click="searchByTag(tag)">{{ tag }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import sightApi from '@/common/api/sight.js'

// 搜索关键词
const searchKeyword = ref('')

// 搜索结果
const searchResults = ref([])

// 是否已搜索
const searched = ref(false)

// 热门搜索标签
const hotTags = ref(['长城', '故宫', '西湖', '黄山', '九寨沟'])

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = ''
}

// 处理搜索
const handleSearch = async () => {
  if (!searchKeyword.value.trim()) {
    uni.showToast({
      title: '请输入搜索关键词',
      icon: 'none'
    })
    return
  }
  
  try {
    // 调用API搜索景点
  const response = await sightApi.getSights({ name: searchKeyword.value })
    
    if (response && response.status === "success" && response.data) {
      searchResults.value = response.data.items || []
      searched.value = true
    } else {
      searchResults.value = []
      searched.value = true
    }
  } catch (error) {
    console.error('搜索失败:', error)
    uni.showToast({
      title: '搜索失败，请重试',
      icon: 'none'
    })
    searchResults.value = []
    searched.value = true
  }
}

// 根据标签搜索
const searchByTag = (tag) => {
  searchKeyword.value = tag
  handleSearch()
}

// 跳转到详情页
const goToDetail = (sightId) => {
  uni.navigateTo({
    url: `/pages/plan/sight-info?sightId=${sightId}`
  })
}
</script>

<style lang="scss" scoped>
.search-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 35rpx;
  padding: 0 20rpx;
  height: 70rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  border: none;
  outline: none;
  font-size: 28rpx;
  background-color: transparent;
}

.uni-icons {
  color: #999;
  font-size: 32rpx;
  padding: 10rpx;
}

.search-btn {
  width: 150rpx;
  height: 70rpx;
  margin-left: 20rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.search-results {
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.result-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.item-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.item-desc {
  font-size: 24rpx;
  color: #666;
  lines: 2;
  text-overflow: ellipsis;
}

.item-rating {
  font-size: 24rpx;
  color: #ff9900;
}

.no-results {
  text-align: center;
  padding: 100rpx 0;
  font-size: 28rpx;
  color: #999;
}

.hot-search {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
}

.hot-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
}

.hot-tag {
  background-color: #f0f0f0;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  
  &:active {
    background-color: #007AFF;
    color: #fff;
  }
}
</style>
